<template>
	<t-layout-page>
		<t-layout-page-item>
			<t-query-condition ref="queryCondition" :opts="opts" @submit="conditionEnter" />
		</t-layout-page-item>
	</t-layout-page>
</template>
<script>
export default {
	name: 'labelRenderDemo',
	data() {
		return {
			queryData: {
				likeCargoNo: null,
				likeBookNo: null,
				likeTransportNo: null,
				likeCargoName: null
			}
		}
	},
	computed: {
		opts() {
			return {
				likeCargoNo: {
					label: '货源编号',
					comp: 'el-input'
				},
				likeBookNo: {
					labelRender: () => {
						return (
							<el-tooltip content={'自定义label'} placement='top'>
								<div style='color:blue;'>订单编号</div>
							</el-tooltip>
						)
					},
					placeholder: '自定义label',
					comp: 'el-input'
				},
				likeTransportNo: {
					label: '运单编号',
					comp: 'el-input'
				},
				likeCargoName: {
					label: '货品名称',
					comp: 'el-input'
				}
			}
		},
		// 查询条件所需参数
		getQueryData() {
			const { likeCargoNo, likeBookNo, likeTransportNo, likeCargoName } = this.queryData
			return {
				likeCargoNo,
				likeBookNo,
				likeTransportNo,
				likeCargoName
			}
		}
	},
	// 方法
	methods: {
		// 点击查询按钮
		conditionEnter(data) {
			console.log('查询条件', data)
			this.queryData = data
			console.log('最终条件', this.getQueryData)
		}
	}
}
</script>
